<template>
  <el-form
    ref="dialogFormRef"
    :model="formInline"
    label-width="120px"
    :rules="rules"
  >
    <el-form-item label="配置Code" prop="configCode">
      <el-input
        v-model="newFormInline.configCode"
        placeholder="请输入配置Code"
      />
    </el-form-item>

    <el-form-item label="配置值" prop="configValue">
      <el-input
        v-model="newFormInline.configValue"
        placeholder="请输入配置值"
      />
    </el-form-item>

    <el-form-item label="请求地址" prop="functionName">
      <el-input
        v-model="newFormInline.functionName"
        placeholder="请输入请求地址"
      />
    </el-form-item>

    <el-form-item label="名称" prop="name">
      <el-input v-model="newFormInline.name" placeholder="请输入名称" />
    </el-form-item>

    <el-form-item label="备注" prop="remark">
      <el-input v-model="newFormInline.remark" type="textarea" :rows="3" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FormProps } from "@/views/system/configSettings/utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    configCode: "",
    configValue: "",
    functionName: "",
    name: "",
    remark: ""
  })
});
const dialogFormRef = ref();

const newFormInline = ref(props.formInline);

function getFormData() {
  return newFormInline.value;
}

function getFormRef() {
  return dialogFormRef.value;
}

const rules = {
  configCode: [
    { required: true, message: "配置Code不能为空", trigger: "blur" }
  ],
  configValue: [{ required: true, message: "配置值不能为空", trigger: "blur" }]
};
defineExpose({ getFormData, getFormRef });
</script>

<style scoped>
.el-input,
.el-select {
  width: 90%;
}
</style>
